<template>
  <section class="expertList-out" @scroll.passive="scrollData" ref="scrollOut">
    <!--<div class="expertList-in">-->
    <div class="section_0307" v-for="(item,key) in items" :key="key">
      <i class="icon_0307"><span class="span_0307">{{item.User.Job == undefined?"求":"行"}}</span></i>
      <div class="dataWrap_0307">
        <div class="itemWrap_0307" @click="toHomeSwiper(item,0)">
          <dl class="item_0307 wrap_0307">
            <dt class="face_0307" :style="{background:'url('+item.User.HeadUrl + ') no-repeat center'}"></dt>
            <em v-if="item.Distance || item.Distance == 0">{{(item.Distance/1000).toFixed(2)}}KM</em>
            <div class="infowrap_0307">
              <!-- 描述 -->
              <p class="name_0307">{{item.User.Name}}</p>
              <p class="name_0307">{{item.User.Job}}</p>
            </div>
          </dl>
        </div>
        <div class="itemWrap_0307" v-for="(subItem,index) in item.MessageDetails" @click="toHomeSwiper(item,index+1)" >
          <div class="item_0307 itemImg_0307 wrap_0307" :style="{background:'url('+ vioce + ') no-repeat center'}" v-if="subItem.Type == 1">
            <p class="Pinfo_0307">{{subItem.Title}}</p>
            <div class="voice-bg"></div>
          </div>
          <div class="item_0307 itemImg_0307 wrap_0307" :style="{background:'url('+ videoBg + ') no-repeat center'}" v-else-if="subItem.Type == 2">
            <p class="Pinfo_0307">{{subItem.Title}}</p>
            <div class="video-bg"></div>
          </div>
          <div class="item_0307 itemImg_0307" :style="{background:'url('+subItem.PicUrl + ') no-repeat center'}" v-else>
            <p class="Pinfo_0307">{{subItem.Title}}</p>            
          </div>
        </div>
        <div class="itemWrap_0307" v-if="item.AskToSeeId?false:item.Commnet&&item.Commnet.length > 0" @click="comite(item.PostMessageId)" >
          <div class="item_0307 itemImg_0307 wrap_0307 comfont_0307">
            <div class="comfont">
              <p class="com_0307" v-for="(comItem,index) in item.Commnet" :class="arrColor[getNumber()]">{{comItem}}</p>
            </div>
          </div>
        </div>
        <div v-if="collection" class="itemWrap_0307">
          <div class="delete-collect" @click="cancelCollect(item.CollectId,key)">
            <div class="text">取消收藏</div>
          </div>
        </div>
        <section class="select-box" v-if="!collection">
          <div class="delete" @click="toCollect(item)" :class="{addpadding:isMe != item.User.OpenId}">
              <i class="icon-delete" :class="{collected:item.Iscollect}"></i>
              <span>{{item.Iscollect?"取消收藏":"收藏"}}</span>
          </div>
          <div class="edit-share top-border-1px" @click="shareItem(item)" :class="{addpadding:isMe != item.User.OpenId}">
              <i class="icon-edit"></i>
              <span>分享</span>
          </div>
          <div class="edit-share top-border-1px" @click="removeinformation(item,key)" v-if="item.AskToSeeId && isMe == item.User.OpenId">
              <i class="icon-delet"></i>
              <span>删除</span>
          </div>
        </section>
      </div>
    </div>
    <!--</div>-->
  </section>
</template>
<script>
import Client from '../../assets/js/common';
import API from '../../assets/js/fetchAPI';
import Apis from '../../assets/js/asktoses';
import { fetch,zdUrl,bdUrl,webUrl } from '../../assets/api';
import { Toast } from 'mint-ui';
export default {
  props:{
    items:{
    },
    collection:{

    }
  },
  data () {
    return {
      text:['行','求',''],
      classArr: ["label_1","label_2","label_3"],
      loginData:null,
      vioce:require('../../assets/img/expert/ztMusic.jpg'),
      videoBg:require('../../assets/img/expert/ztVideo.jpg'),
      arrColor: ["pink", "purple", "green", "yellow","bule"],
      firstImg:"",
      isMe:null,
    }
  },
  created(){
    this.loginData = Client.getStore('login');
    this.isMe = this.loginData[0].OpenId;
  },
  methods: {
    async toCollect(val){
      let postLogin = this.loginData[1],
          urls = API.meetCollect,
          postObj = {PostMessageId:val.PostMessageId};
      if(!val.PostMessageId){
        urls = API.askToMeetCollect;
        postObj = {AskToSeeId:val.AskToSeeId};
      }
      try{
          await fetch(urls,{...this.loginData[1],...postObj});
          if (val.Iscollect){
            Toast('取消收藏');
          } else {
            Toast('收藏成功');
          }
          val.Iscollect = !val.Iscollect
      }catch(e){
        Toast('收藏失败');
      }
    },
    async removeinformation(item,key){
      await fetch(Apis.DeleteAskToSes,{
        ...this.loginData[1],
        AskToSeeId:item.AskToSeeId
      });
      this.items.splice(key,1);
      Toast("删除成功")
    },
    //分享标点
    shareItem(item){
      //CollectUrl, CollectTitle, CollectImgUrl
      console.log(item)
      let shareObj = {};
      let infoId = "";
      let hjtype = 0;
      let picnum = 0,
          arr = [],
          puzzlenum = 0,
          voicenum = 0,
          videonum = 0;
      for(let i = 0;i < item.MessageDetails.length;i++){
        let typenum = item.MessageDetails[i].Type?item.MessageDetails[i].Type:0;
        if(item.MessageDetails[0].Title){
          shareObj.articleTitle = item.MessageDetails[0].Title;
        } else {
          shareObj.articleTitle = "暂无标题"; // 标题
        }
        if(typenum == 0){
          picnum ++;
          this.getFirstImg(item.MessageDetails[i].ThumPicUrl)
        } else if (typenum == 1) {
          voicenum ++;
        } else if(typenum == 2) {
          puzzlenum ++;
          this.getFirstImg(item.MessageDetails[i].ThumPicUrl)
        } else {
          videonum ++;
        }
      }
      arr.push(picnum);arr.push(puzzlenum);arr.push(voicenum);arr.push(videonum);
      if(item.User.SelfSignature) {
        shareObj.SelfSignature = item.User.SelfSignature; // 描述
      } else {
        shareObj.SelfSignature = "暂无个性签名"; // 描述
      }
      if(item.Tallys && item.Tallys[0]) {
        shareObj.tally = item.Tallys[0]; // 标签
      } else {
        shareObj.tally = "暂无标签"; // 标签
      }

      if(item.PostMessageId){
          infoId = item.PostMessageId;
          hjtype = 1;
        } else {
          infoId = item.AskToSeeId;
          hjtype = 0;
      }
      //let objsurl = encodeURIComponent(JSON.stringify({id:infoId,index:0,type:hjtype,goBack:true,}));
      shareObj.CollectUrl = `${webUrl}expertSwiper?id=${infoId}&index=0&type=1&goback=true`;
      shareObj.kindTypeImg = this.firstImg;
      let app = this.loginData[2];
      let userMes = item.User;
      if(userMes&&userMes.HeadUrl){
        shareObj.CollectImgUrl = userMes.HeadUrl;
      }else{
        shareObj.CollectImgUrl = ' ';
      }
      if(userMes&&userMes.Name){
        shareObj.CollectTitle = userMes.Name;
      }else if(userMes.MessageDetails&&userMes.MessageDetails[0]){
        shareObj.CollectTitle = userMes.MessageDetails[0].Title;
      }
      document.location.href= zdUrl + 
      'wxShare?' + 
      'AppId=' + app.AppId + 
      '&OpenId=' + app.OpenId + 
      '&arr='+ arr +
      '&objs=' + encodeURIComponent(JSON.stringify(shareObj));
    },
    //获取第一张图片
    getFirstImg(img) {
      if(!this.firstImg){
        this.firstImg = img.replace(/\.cosgz/g,'.picgz');
      } else {
        return;
      }
    },
    comite(el){
      this.$router.push({path:"commite",query:{informationDetilId:el}})
    },
    getNumber(){
      return Math.round(Math.random()*3);
    },
    toHomeSwiper(item,key) {
      if(!this.loginData){
        this.loginData = Client.getStore('login');
      }
      let objs = {id:item.PostMessageId,index:key,type:1};
      if(!item.PostMessageId){
        objs.id = item.AskToSeeId;
        objs.type = 3;
      }
      let cObj = {...objs,...this.loginData[0]};
      this.$store.commit('clickObj', cObj);
      this.$store.commit('boxShow', true); 
      this.$emit('personClick',objs);
    },
    scrollData(){
      let outH = this.$refs.scrollOut.scrollHeight,
          currentH = this.$refs.scrollOut.offsetHeight,
          offH = this.$refs.scrollOut.scrollTop;
      if(currentH + offH >= outH){
        this.$emit('scrollBottom',true);
      }
    },
    cancelCollect(id,key){
      let objs = {ids:id,keys:key};
      this.$emit('delCollect',objs);
    }
  },
  components:{
  }
}

</script>
<style lang="less">
.pink {
  color: #A3021C;
}
.purple {
  color: #D07305;
}
.green {
  color: #C3AF02;
}
.yellow {
  color: #D07305;
}
.bule {
  color: #0CCCE9;
}


.select-box {
    height: 2.15rem;
    padding: 0rem .15rem 0rem 0;
    text-align: center;
    background: #fff;
    border-radius: 0 .2rem .2rem 0;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .addpadding{
      padding: .228rem 0 !important;
    }
    .delete,
    .edit-share {
      padding: 0.1rem 0;
      box-sizing: border-box;
      .icon-delete,
      .icon-edit {
        margin:0 auto;
        display: block;
        width: 0.25rem;
        height: 0.2rem;
        background-size: cover !important;
        background: url("../../assets/img/collect.png") center center;
      }
      .icon-edit {
        width: 0.25rem;
        height: 0.25rem;
        background-size: cover;
        background: url("../../assets/img/person/icon_share06@3x.png") center center;
      }
      .icon-delet{
        margin:0 auto;
        display: block;
        width: 0.25rem;
        height: 0.2rem;
        background-size: cover !important;
        background: url("../../assets/img/expert/icon_delete-max@3x.png") center center;
        opacity: .3;
      }
      .collected{
        background: url("../../assets/img/hasCollect.png") center center;        
      }
      span {
        display: inline-block;
        margin-top: 0.1rem;
        width: 1.2rem;
        font-size: 0.16rem;
        color: #000;
        text-align: center;
      }
    }
  }


.expertList-out{
  width:100%;
  height:100%;
  overflow: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  .expertList-in{
    overflow: hidden;
  }
  .section_0307 {
    height: 2.35rem;
    width: 100%;
    border-top-left-radius: .1rem;
    border-bottom-left-radius: .1rem;
    position: relative;
    overflow-y: hidden;
    margin-bottom: .1rem;
    em{
      display: inline-block;
      font-style: normal;
      color: #666;
      padding: .05rem;
      z-index: 2;
      font-size: 0.14rem;
      border-radius: .03rem;
      margin-right: .05rem;
      position: absolute;
      right: 0;
      top: 0;
    }
    .icon_0307 {
      font-style: normal;
      display: block;
      width: 0;
      height: 0;
      border-width: .3rem;
      border-color: #DBB177 transparent transparent #DBB177;
      border-style: solid;
      border-top-left-radius: .1rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      .span_0307 {
        position: absolute;
        left: -.2rem;
        top: -.2rem;
        color: white;
        font-size: .18rem;
      }
    }
    .dataWrap_0307 {
      height: 2.35rem;
      padding: .1rem;
      width: 100%;
      background: white;
      overflow-x: auto;
      display: flex;
      box-sizing: border-box;
      .itemWrap_0307 {
        .itemImg_0307 {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #333;
          background-size: cover!important;
          position: relative;
          .voice-bg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: url(../../assets/img/person/icon8.png) no-repeat center;
            background-size: 70% !important;
            height: 50%;
            width: 50%
          }
          .video-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: url(../../assets/img/person/icon9.png) no-repeat center;
            background-size: 70% !important;
            height: 50%;
            width: 50%
          }
         .Pinfo_0307 {
            color: white;
            font-size: .15rem;
            line-height: .21rem;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            padding-left: 0.1rem;
            line-height: .4rem;
            right: 0;
            z-index: 1;
            display: box;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
            background: rgba(0, 0, 0, .2);
          }
          .comfont{
            width: 100%;
          }
          .com_0307{
            text-align: center;
            font-size: .15rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            overflow: hidden;
            width: 90%;
            margin: 10px auto;
          }
        }
        .wrap_0307{
          -webkit-box-shadow: 0 0 0.05rem #ccc;
          box-shadow: 0 0 0.05rem #ccc;
        }
        .comfont_0307{
          background: rgba(38, 38, 38, 0.6) !important;
        }
        .item_0307{
          width: 2rem;
          height: 2.15rem;
          background: #fff;
          margin-right: .1rem;
          position: relative;
          .info_0307{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            //background: rgb(255, 186, 0);
            border-radius: 0.03rem;
            color: #333;
          }
          .face_0307 {
            width: 1.25rem;
            height: 1.25rem;
            background: url(../../assets/img/person/2.jpg) no-repeat center;
            background-size: cover !important;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            span {
              padding: .05rem .08rem;
              background: #656565;
              border-radius: .04rem;
              display: inline-block;
              position: absolute;
              text-align: center;
              color: white;
              left: 50%;
              top: 30%;
            }
          }
          .infowrap_0307 {
            position: absolute;
            top: 78%;
            left: 0;
            right: 0;
            text-align: center;
            .name_0307 {
              font-size: .16rem;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #333;
              padding: 0 .1rem;
              &:nth-of-type(2){
                font-size: .18rem;
                color: #999;
                margin-top: .07rem;
              }
            }
          }
          .swrap_0307 {
            display: flex;
            align-items: center;
            padding: 0;
            height: .25rem;
            margin-top: .05rem;
          }
          .label_1 {
              span:nth-of-type(1) {
                top: .24rem;
                left: .87rem;
              }
              span:nth-of-type(2) {
                top: .68rem;
                left: .60rem;
              }
            }
            .label_2 {
              span:nth-of-type(1) {
                top: .6rem;
                left: .28rem;
              }
              span:nth-of-type(2) {
                top: .91rem;
                left: .78rem;
              }
            }
            .label_3 {
              span:nth-of-type(1) {
                top: .41rem;
                left: .76rem;
              }
              span:nth-of-type(2) {
                top: .68rem;
                left: .31rem;
              }
            }


        }
        .delete-collect{
          width:1rem;
          height:2.13rem;
          background: #EFEFF4 url(../../assets/img/expert/icon_delete-max@3x.png) no-repeat center .8rem;
          background-size: .32rem;
          margin-right:.1rem;
          .text{
            font-size: .12rem;
            text-align: center;
            position: relative;
            top:1.2rem;
          }
        }
      }
    }
  }
}
</style>
